<template>
    <div class="statistics">
      <h2 style="color: white;">订单总览与统计</h2>
      <div class="cards">
        <a-card class="statistic-card">
          <a-statistic title="总订单数" :value="totalOrders" />
        </a-card>
        <a-card class="statistic-card">
          <a-statistic title="总完成数" :value="completedOrders" />
        </a-card>
        <a-card class="statistic-card">
          <a-statistic title="总问题订单数" :value="problemOrders" />
        </a-card>
        <a-card class="statistic-card">
          <a-statistic title="完成率" :value="completionRate + '%'" />
        </a-card>
        <a-card class="statistic-card">
          <a-statistic title="问题率" :value="problemRate + '%'" />
        </a-card>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import request from '../../../util/request';
  import { message } from 'ant-design-vue';
  
  export default {
    name: 'OrdersStatistics',
    setup() {
      const totalOrders = ref(0);
      const completedOrders = ref(0);
      const problemOrders = ref(0);
      const completionRate = ref('');
      const problemRate = ref('');
  
      const fetchStatistics = async () => {
        // 从后端获取统计数据
        request.get('/order/getAll').then(res => {
          const data = res.data.ol;
          totalOrders.value = data.length;
          if (data.length > 0) {
            data.forEach(order => {
              if (order.orderStatus === 3) {
                completedOrders.value++;
              }
              if (order.orderStatus === 4) {
                problemOrders.value++;
              }
            });
          }
          completionRate.value = ((completedOrders.value / totalOrders.value) * 100).toFixed(2);
          problemRate.value = ((problemOrders.value / totalOrders.value) * 100).toFixed(2);
        }).catch(err => {
          message.error('获取统计数据失败', err);
        });
        // 计算完成率和问题率
      };
  
      onMounted(fetchStatistics);
  
      return {
        totalOrders,
        completedOrders,
        problemOrders,
        completionRate,
        problemRate,
      };
    },
  };
  </script>
  
  <style scoped>
  .statistics {
    padding: 24px;
    background: #1a1a1a; /* 暗色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #ffffff; /* 字体颜色为白色 */
  }
  
  .cards {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
  }
  
  .statistic-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.8); /* 微透明背景 */
  }
  </style>
  